<template>
	<view class="box">
		<view class="Hospital-box">
			<u-icon name="list-dot" color="#2979ff" style="padding: 0 15rpx;" size="40" @click="show = true">
			</u-icon>
			<u-search class="u-search" placeholder="医生名搜索" v-model="name" @search="searchName" @custom="searchName"
				@clear="clearName">
			</u-search>
		</view>
		<!-- 医生卡片开始 -->
		<view class="" v-if="doctorList.length">
			<speciaItem :item="item" v-for="(item,index) in doctorList" :key="item.id"></speciaItem>
		</view>
		<view class="empty" v-else>
			<uni-icons type="paperplane"></uni-icons>
			<text>现在还没有医生, 去看看其他的吧</text>
		</view>
		<!-- 医生卡片结束 -->
		<u-select v-model="show" mode="mutil-column" :list="showList" @confirm="filterDoctor" title="医生筛选"
			:default-value="defaultValue"></u-select>
	</view>
</template>

<script>
	import {
		getDoctorListApi,
		getHospitalApi
	} from '../../common/api/doctorApi';
	import {
		speciaItem
	} from '../../components/speciaItem.vue';
	import {
		getdeptListApi
	} from '../../common/api/lectureApi.js'
	import {
		filterDepartmentHospital
	} from '../../utils/filter.js'
	export default {
		components: {
			speciaItem
		},
		data() {
			return {
				doctorList: [],
				pageNum: 1,
				finish: false,
				valve: false,
				HospitalList: [],
				DepartmentList: [],
				Hospital: '',
				department: '',
				wh: 0,
				show: false,
				defaultValue: [0, 0],
				name: ''
			};
		},
		computed: {
			showList() {
				return [this.HospitalList, this.DepartmentList]
			}
		},
		methods: {
			async getDoctorList(callback) {
				this.valve = true
				const res = await getDoctorListApi({
					name: this.name,
					pageNum: this.pageNum,
					pageSize: 10,
					hospital: this.Hospital,
					department: this.department
				})
				if (!res.data.records.length) {
					this.finish = true
					uni.$showToast('已经到底啦')
				}
				this.doctorList.push(...res.data.records)
				this.valve = false
				callback && callback()
			},
			async getHospital() {
				const res = await getHospitalApi()
				this.HospitalList = filterDepartmentHospital(res.data)
				this.Hospital = this.HospitalList[0].value
			},
			async getdeptList() {
				const r = await getdeptListApi(16)
				this.DepartmentList = filterDepartmentHospital(r.data)
			},
			async filterDoctor(e) {
				this.name = ''
				this.Hospital = e[0].value
				this.department = e[1].value
				this.pageNum = 1
				this.doctorList = []
				this.finish = false
				await this.getDoctorList()
				this.defaultValue = [e[0].extra, e[1].extra]
			},
			async searchName() {
				this.doctorList = []
				this.pageNum = 1
				this.getDoctorList()
			},
			async clearName() {
				this.doctorList = []
				this.pageNum = 1
				this.getDoctorList()
			},
		},
		async onLoad() {
			let getWindowInfo = uni.getWindowInfo()
			this.wh = getWindowInfo.windowHeight
			await this.getHospital()
			// this.getDoctorList()
			this.getDoctorList()
			this.getdeptList()
		},
		async onPullDownRefresh() {
			this.doctorList = []
			this.pageNum = 1
			this.finish = false
			this.valve = false
			this.HospitalList = []
			this.DepartmentList = []
			this.Hospital = ''
			this.department = ''
			this.show = false
			this.defaultValue = [0, 0]
			await this.getHospital()
			await this.getDoctorList(uni.stopPullDownRefresh)
			// uni.redirectTo({
			// 	url: '/pages/specialist/specialist'
			// })
		},
		onReachBottom() {
			if (this.finish) return uni.$showToast('已经到底啦');
			if (this.valve) return uni.$showToast('数据请求中,请稍候')
			this.pageNum = this.pageNum + 1
			this.getDoctorList()
		}
	}
</script>

<style lang="scss" scoped>
	.empty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: rgba(0, 0, 0, 0.25);
		width: 100%;
		font-size: 28rpx;

		/deep/ uni-icons {
			text {
				font-size: 200rpx !important;
				color: rgba(0, 0, 0, 0.25) !important;
			}
		}
	}

	.empty {
		padding-top: 40px;
	}

	.Hospital-box {
		position: sticky;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #fff;
		z-index: 99;

		.u-search {
			flex: 1;
		}
	}
</style>
